//单文件的代办事项的应用
//状态管理使用案例
<template>
  <div class="todo-app">
    <h1>Todo List</h1>
    <div class="add-todo">
      <input 
        type="text" 
        v-model="newTodoText"
        placeholder="添加新的待办事项..."
        @keyup.enter="handleAddTodo"
      >
      <button @click="handleAddTodo">添加</button>
    </div>
    <div class="todo-list">
      <div 
        class="todo-item" 
        v-for="todo in filteredTodos" 
        :key="todo.id"
      >
        <input 
          type="checkbox" 
          v-model="todo.completed"
          @change="toggleTodo(todo.id)"
        >
        
        <span 
          class="todo-text"
          :class="{ completed: todo.completed, editing: editingId === todo.id }"
          @dblclick="startEditing(todo.id)"
        >
          {{ todo.text }}
        </span>
        
        <button 
          class="delete-btn"
          @click="deleteTodo(todo.id)"
        >
          删除
        </button>
      </div>
    </div>
    <div class="todo-footer">
      <span>{{ activeCount }} 项未完成</span>
      
      <div class="filters">
        <button 
          :class="{ active: filter === 'all' }"
          @click="setFilter('all')"
        >
          全部
        </button>
        <button 
          :class="{ active: filter === 'active' }"
          @click="setFilter('active')"
        >
          未完成
        </button>
        <button 
          :class="{ active: filter === 'completed' }"
          @click="setFilter('completed')"
        >
          已完成
        </button>
      </div>
      
      <button 
        class="clear-completed"
        @click="clearCompleted"
        :disabled="activeCount === todos.length"
      >
        清除已完成
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const todos = ref([
  { id: 1, text: '学习Vue 3', completed: false },
  { id: 2, text: '了解Pinia状态管理', completed: false }
])
const newTodoText = ref('')
const editingId = ref(null)
const filter = ref('all')
const filteredTodos = computed(() => {
  switch (filter.value) {
    case 'active':
      return todos.value.filter(todo =>!todo.completed)
    case 'completed':
      return todos.value.filter(todo => todo.completed)
    default:
      return todos.value
  }
})
const activeCount = computed(() => {
  return todos.value.filter(todo =>!todo.completed).length
})
const handleAddTodo = () => {
  if (newTodoText.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodoText.value.trim(),
      completed: false
    })
    newTodoText.value = ''
  }
}
const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed =!todo.completed
  }
}
const deleteTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id!== id)
}
const startEditing = (id) => {
  editingId.value = id
}
const setFilter = (newFilter) => {
  filter.value = newFilter
}
const clearCompleted = () => {
  todos.value = todos.value.filter(todo =>!todo.completed)
}
</script>

<style scoped>

//样式设计
.todo-app {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

h1 {
  text-align: center;
  color: #333;
}

.add-todo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.add-todo input {
  flex: 1;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-todo button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-todo button:hover {
  background-color: #35a772;
}

.todo-list {
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 20px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item:hover {
  background-color: #f9f9f9;
}

.todo-text {
  flex: 1;
  margin: 0 10px;
  transition: color 0.2s, text-decoration 0.2s;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #888;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.delete-btn:hover {
  opacity: 1;
}

.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
}

.filters button {
  margin: 0 5px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.filters button.active {
  border-color: #42b983;
  color: #42b983;
}

.clear-completed {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}

.clear-completed:hover {
  color: #333;
}

.clear-completed:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}
</style>
    